<template>
  <div>
    <h1>用户信息</h1>
    <div>姓名:{{ name }}</div>
    <div>年龄:{{ age }}</div>
    <div>职业:{{ job }}</div>
    <div>描述：{{store.getUserInfo }}</div>
    <div>
        <button @click="changeUserInfo">更改用户信息</button>
        <button @click="patchUserInfo">部分更改</button>
        <button @click="resetUserInfo">重置</button>
    </div>
  </div>
</template>

<script lang='ts' setup>
import useUserStore from '@/store/useUserStore';
import {storeToRefs} from 'pinia'
const store=useUserStore()
const {name,age,job}=storeToRefs(store)

const changeUserInfo=()=>{
    store.modifyUserInfo("张无忌",23,"教主")
}

const patchUserInfo=()=>{
    store.$patch({
        name:'周芷若',
        age:22
    })
}

const resetUserInfo=()=>{
    store.$reset()
}
</script>

<style lang='scss' scoped>
</style>